<template>
    <div class="page coach-page youth-instituttons">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/coach_training_banner.jpg')">
                <span>青训机构</span>
                <p>YOUTH INSTITUTIONS</p>
            </div>
        </div>
        <div class="content">
            <div class="tabs">
                <div class="training-content-header">
                    <span>已入驻机构</span>
                    <div class="training-content-line"></div>
                </div>
            </div>
            <div class="tabs-container">
                <div class="tabs-con-item" v-for="(item,index) in list">
                    <div class="instituttons-container">
                        <div class="instituttons-title">{{item.name }}</div>
                        <img :src="item.homeImgs|filtersImg "/>
                        <div class="instituttons-details" v-html="item.info"></div>
                        <div class="instituttons-information">地址：{{item.infoAddress }}</div>
                        <div class="instituttons-information">联系方式：{{item.infoPhone }}</div>
                    </div>
                    <router-link class="tabs-button" :to="'/instituttonsDetails/'+item.id">查看详情<img
                            src="/images/right_arrow.png"/></router-link>
                </div>
                <el-pagination
                        class="youthInstituttonspage"
                        background
                        @current-change="handleCurrentChange"
                        :page-size="pageSize"
                        layout="prev, pager, next"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<style>
    .youthInstituttonspage{
        text-align: right;
        margin-bottom: 20px;
    }
</style>
<script>
    import {mechanismGetSettledInList} from "../../api/api/web.js"

    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        data() {
            return {
                datalist: [],
                total: 0,
                pageSize: 9,
                pageNum: 1,
                list: []
            }
        },

        methods: {
            // 切换
            swich(e) {
                this.type = e
                console.log(e);
                this.GetList()
            },
            // 分页选择
            handleCurrentChange(val) {
                console.log(val);
                this.pageNum = val
                this.getList()
            },
            // 返回上一页
            back() {
                this.$router.go(-1);//返回上一层
            },
            // 获取列表
            getList() {
                mechanismGetSettledInList({"pageNum": this.pageNum, "pageSize": this.pageSize}).then((res) => {
                    this.list = res.data.list
                    this.total = res.data.total
                }).catch((res) => {
                    this.$message({
                        message: res.message,
                        type: 'error',
                        duration: 5 * 1000
                    });
                })
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            }
        },
        created() {
            this.getList()
        }
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");
</style>
